<template>
  <lay-container fluid="true" style="padding: 10px">
    <lay-row :space="10">
      <lay-col :md="24">
        <lay-card>
          <lay-table :columns="columns" :dataSource="dataSource" :default-toolbar="defaultToolbar"
            v-model:expandKeys="expandKeys" :size="tablesize" :default-expand-all="false">
            <template v-slot:toolbar>
              <lay-button type="primary" size="sm" @click="add" v-permission="PerKey.Menu_AddOrEditView"
                prefix-icon="layui-icon-addition">新增
              </lay-button>
              <lay-button type="primary" size="sm" @click="expandAll" prefix-icon="layui-icon-fonts-del">全部折叠
              </lay-button>
            </template>
            <template v-slot:icon="{ data }">
              <lay-icon :type="data.icon"></lay-icon>
            </template>
            <template v-slot:type="{ data }">
              <span v-if="data.type == 1">
                <lay-badge type="rim"> {{ menuFind(data.type) }}</lay-badge>
              </span>
              <span v-else style="color:blueviolet">
                {{ menuFind(data.type) }}
              </span>
            </template>
            <template v-slot:hide="{ data }">
              <lay-badge theme="green" v-if="!data.hide">显示</lay-badge>
              <lay-badge v-else>隐藏</lay-badge>
            </template>
            <template v-slot:stat="{ data }">
              <lay-badge theme="orange" v-if="!data.status">禁用</lay-badge>
              <lay-badge theme="green" v-else>启用</lay-badge>
            </template>
            <template v-slot:operator="{ data }">
              <lay-button-group>
                <lay-button type="primary" size="sm" @click="edit(data.id)" v-permission="PerKey.Menu_AddOrEditView"
                  prefix-icon="layui-icon-edit">
                  编辑</lay-button>
                <lay-button type="danger" size="sm" @click="del(data)" v-permission="PerKey.Menu_Delete"
                  prefix-icon="layui-icon-delete">删除
                </lay-button>
              </lay-button-group>
            </template>
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-row>

    <lay-layer :title="addoredittip" v-model="modelVisible" :resize="true" :area="['700px']">
      <lay-card style="padding:10px;">
        <lay-row space="10">
          <lay-form :model="form">
            <lay-col :md="24">
              <lay-form-item label="上级菜单" prop="pid" required>
                <lay-col md="10">
                  <lay-select v-model="form.pid" style="width:160px;">
                    <lay-select-option :value="0" label="顶级"></lay-select-option>
                    <lay-select-option v-for="cate in catList" :value="cate.id" :label="cate.title"
                      :disabled="cate.id == form.id"></lay-select-option>
                  </lay-select>
                  <!--  <lay-cascader :options="catList" v-model="form.pid" placeholder="点我试一试" allow-clear>
                  </lay-cascader> -->
                </lay-col>
                <lay-col md="14" class="tip">不能选择自己作为上级</lay-col>
              </lay-form-item>
              <lay-form-item label="类型" required required-error-message="菜单类型不能空">
                <lay-radio-group v-model="form.type">
                  <lay-radio v-for="item in menuList" :value="item.key">{{ item.value }}</lay-radio>
                </lay-radio-group>
              </lay-form-item>
              <lay-form-item label="名称" prop="name" required required-error-message="名称不能空">
                <lay-input v-model="form.name"></lay-input>
              </lay-form-item>
              <lay-col md="24">
                <lay-col md="12">
                  <lay-form-item label="路由路径" prop="pathUrl">
                    <lay-input v-model="form.pathUrl"></lay-input>
                  </lay-form-item>
                </lay-col>
                <lay-col md="12">
                  <lay-form-item label="组件路径" prop="comUrl">
                    <lay-input v-model="form.comUrl"></lay-input>
                  </lay-form-item>
                </lay-col>
              </lay-col>
              <lay-col md="24">
                <lay-col md="12">
                  <lay-form-item label="权限标识" prop="roleCode">
                    <lay-input v-model="form.roleCode"></lay-input>
                  </lay-form-item>
                </lay-col>
                <lay-col md="12">
                  <lay-form-item label="菜单图标" prop="icon">
                    <lay-icon-picker v-model="form.icon" showSearch></lay-icon-picker>
                  </lay-form-item>
                </lay-col>
              </lay-col>
              <lay-col md="24">
                <lay-col md="12">
                  <lay-form-item label="重定向路由" prop="redirect">
                    <lay-input v-model="form.redirect"></lay-input>
                  </lay-form-item>
                </lay-col>
                <lay-col md="12">
                  <lay-form-item label="显隐" prop="hide">
                    <lay-col md="24">
                    <lay-radio v-model="form.hide" name="action" :value="false" label="显示"></lay-radio>
                    <lay-radio v-model="form.hide" name="action" :value="true" label="隐藏"></lay-radio>
                  </lay-col>
                  </lay-form-item>
                </lay-col>
              </lay-col>
              <lay-col md="24">
                <lay-col md="12">
                  <lay-form-item label="排序" prop="sort">
                    <lay-input-number v-model="form.sort"></lay-input-number>
                  </lay-form-item>
                </lay-col>
                <lay-col md="12">
                  <lay-form-item label="状态" prop="status">
                    <lay-col md="24" class="tip">
                      <lay-switch v-model="form.status" onswitch-text="启用" unswitch-text="禁用"></lay-switch>
                    </lay-col>
                  </lay-form-item>
                </lay-col>
              </lay-col>

              <lay-col :md="24" class="saveBtn">
                <lay-button @click="submitClick" type="primary" v-permission="PerKey.Menu_AddOrEdit"
                  prefix-icon="layui-icon-ok">
                  {{ addoredittip }}
                </lay-button>
              </lay-col>
            </lay-col>
          </lay-form>
        </lay-row>
      </lay-card>
    </lay-layer>
  </lay-container>
</template>
  
<script lang="ts" setup>
import { ref, reactive, toRefs } from "vue";
import { layer } from "@layui/layer-vue";
import { getList, delOne, getEdit, putEdit, postAdd } from "../../../api/module/menu";
import { PerKey } from "../../../library/permissionConst"
import { Menu } from '../../../types/menu'
import Util from '../../../library/Util'

const defaultToolbar = ref(true);
const tablesize = ref('sm');
const columns = [
  { title: "名称", key: "title", },
  { title: "类型", width: "100px", customSlot: "type", align: "center", },
  { title: "路由路径", width: "140px", key: "pathUrl", },
  { title: "组件路径", width: "200px", key: "comUrl", },
  { title: "权限标识", width: "200px", key: "roleCode" },
  { title: "重定向路由", width: "150px", key: "redirect" },
  { title: "隐藏", width: "80px", customSlot: "hide", align: "center", },
  { title: "图标", width: "80px", customSlot: "icon", align: "center", },
  { title: "排序", width: "80px", key: "sort", align: "center", },
  { title: "状态", customSlot: "stat", width: "80px", align: "center", },
  { title: "操作", width: "200px", customSlot: "operator", key: "operator", align: "center", }
]
//公文管理模型，对应后台 ModelTypeEnum.ModelType 枚举
let menuList = [
  { key: 2, value: "按钮" },
  { key: 1, value: "菜单" },
]

const menuFind = (key: number) => {
  return Util.dictFind(menuList, key);
}
const dataSource = ref([])
//获取列表
const GetList = function () {
  getList().then((res) => {
    if (res.status == 1) {
      dataSource.value = res.data.data
    }
  })
}

const edit = function (id: number) {
  changeVisible(id)
}
const add = function () {
  changeVisible(0)
}

const expandKeys = ref([1]);
const expandAll = () => {
	expandKeys.value = [1]
}

const del = function (data: any) {
  layer.confirm("确认删除ID: " + data.id + " " + data.title + " 类别", {
    title: "警告", move: "true", shade: "false", shadeClose: "true",
    btn: [{
      text: '确认', callback: (layerId: number) => {
        delOne(data.id).then((res) => {
          if (res.status == 1) {
            layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
              GetList()
            });
          } else {
            layer.msg(res.msg);
          }
          layer.close(layerId);
        })
      }
    }, {
      text: '取消', callback: function (layerId: number) {
        layer.close(layerId);
      }
    }]
  })
}

GetList()

//添加或者编辑
const catList = ref({ targetList: [] as any, })

const modelVisible = ref(false)
const data = reactive({
  form: <Menu><unknown>[]
})

const { form } = toRefs(data)
let addoredittip = ref();

const changeVisible = function (id: number) {
  modelVisible.value = !modelVisible.value
  if (id == 0) {
    addoredittip.value = "新增类别";
    getEdit(id).then((res) => {
      catList.value = res.data.catList
      form.value = {
        id: 0,
        pid: 0,
        name: "",
        icon: "layui-icon-rate",
        type: 1,
        sort: 1,
        status: true,
        comUrl: "",
        pathUrl: "",
        roleCode: "",
        redirect: "",
        hide: false,
      }
    })
    return
  } else {
    addoredittip.value = "编辑类别";
    getEdit(id).then((res) => {
      catList.value = res.data.catList
      if (res.status == 1) {
        form.value = res.data.data
      }
    })
    return
  }
}

const submitClick = function () {
  if (!form.value.name) {
    layer.msg("类别名称不能空")
    return
  }
  if (form.value.id == 0) {
    postAdd(form.value).then((res) => {
      done(res)
    });
  } else {
    putEdit(form.value).then((res) => {
      done(res)
    });
  }
};
const done = (res: any) => {

  if (res.status == 1) {
    layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
      modelVisible.value = !modelVisible.value
      GetList()
    });

  } else {
    layer.msg(res.msg, { icon: 2 });
    return false;
  }
}


</script>
  
<style scoped>

</style>